<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
        1.Vue中的数据代理：
        通过vm对象来代理data对象中属性的操作（读/写）
        2.Vue中数据代理的好处：
        更加方便的操作data中的数据
        3.基本原理：
        通过object.defineProperty（）把data对象中所有属性添加到vm上。
        为每一个添加到vm上的属性，都指定一个getter/setter。
        在getter/setter内部去操作（读/写）data中对应的属性。 -->
       <div id="root">
            <h3>学校:{{name}}</h3>
            <h3>地址:{{addr}}</h3>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el: '#root', 
                data(){
                    return {
                        name:'aaa',
                        addr:'bbb',
                    }
                }
            })
        </script>
    </body>
</html>
